<template>
  <div class="pinglunBox" >
    <h3>发表评论</h3>
    <hr>
    <textarea maxlength="120" v-model="msg" placeholder="请输入要评论的内容(最多可输入120个字)"></textarea>
    <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
    <div class="pinglun" v-for="(item, i) in comments" :key="item.id">
      <p class="pingluntitle">
        <span>第{{ i +1 }}楼 用户： {{ item.user_name }}</span>
        <span>发表时间：{{ item.add_time | dateFormat("YYYY-MM-DD HH-mm-ss") }}</span>
      </p>
      <p class="pingluncontent">{{ item.content === 'undefined'? '此用户很懒，什么都没说' : item.content }}</p>
    </div>
    <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
    <!-- <h1>{{ newsinfo }}</h1> -->
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
export default {
  data() {
    return {
      pageIndex: 1, //默认展示第一页数据
      comments: [], //所有的评论数据
      msg: "" // 评论输入的内容
    };
  },
  created() {
    this.getComments();
  },
  methods: {
    getComments() {
      console.log(this.id);
      // "api/getcomments/" + this.id + "?pageindex=" + this.pageIndex
      this.$http
        .get("api/getcomments/" + this.id + "?pageindex=" + this.pageIndex)
        .then(res => {
          if (res.body.status === 0) {
            console.log(res);
             // 每当获取新评论数据的时候，不要把老数据清空覆盖，而是应该以老数据，拼接上新数据
            this.comments = this.comments.concat(res.body.message);
          }else {
            Toast("获取评论列表失败");
          }
        });
    },
    postComment() {
      // 校验是否为空内容
      if(this.msg.trim().length === 0){
        return Toast("评论内容不能为空！")
      }
      // 发表评论
      // 参数1： 请求的URL地址
      // 参数2： 提交给服务器的数据对象 { content: this.msg }
      // 参数3： 定义提交时候，表单中数据的格式  { emulateJSON:true }
      this.$http.post("api/postcomment/" + this.$route.params.id,{
        content:this.msg.trim()
      }).then(res=>{
        if(res.body.status === 0){
          let cmt = {
            user_name:'匿名用户',
            add_time: Date.now(),
            content:this.msg.trim()
          };
          this.comments.unshift(cmt);
          this.msg = "";
        }
      })
    },
    getMore(){
      this.pageIndex ++;
      this. getComments();
    }
  },
  props: ["id"]
};
</script>

<style lang="scss" scoped>
.pinglunBox {
  h3 {
    font-size: 18px;
  }
  textarea {
    font-size: 12px;
    margin: 0;
    height:100px;
  }
  .pingluntitle {
    padding: 0 10px;
    // height: 40px;
    // line-height: 40px;
    background-color: #ccc;
    // display: flex;
    // justify-content: space-between;
    > span {
      font-size: 12px;
    }
  }
  .pingluncontent {
    color: #666;
    text-indent: 1em;
  }
  mt-button {
    // margin:5px 0;
  }
}
</style>
